<template>
  <div v-if="showUI">
    <el-tabs type="border-card" :active-name="activeName">
      <el-tab-pane label="基本信息" name="first">
        <div style="width: 800px">
          <el-descriptions
              class="margin-top"
              title="设备信息列表"
              :column="2"
              border>
            <template slot="extra">
              <el-button type="success" size="mini" @click="getMe">刷新</el-button>
            </template>
            <el-descriptions-item>
              <template slot="label">
                设备名称
              </template>
              {{ me.name }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                uuid
              </template>
              {{ me.uuid }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                厂商名称
              </template>
              {{ me.manufacturer }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                产品名称
              </template>
              {{ me["product-name"] }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                软件版本
              </template>
              {{ me["software-version"] }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                硬件版本
              </template>
              {{ me["hardware-version"] }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                设备类型
              </template>
              {{ me["device-type"] }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                当前NTP
              </template>
              {{ me["ntp-enable"] }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                支持协议
              </template>
              <span v-for="(i,key) in me['layer-protocol-name']" :key="key">
              <span style="color: #0038f5">{{ i }}</span>
              <el-divider direction="vertical" v-if="key!==me['layer-protocol-name'].length-1"></el-divider>
            </span>
            </el-descriptions-item>


            <el-descriptions-item>
              <template slot="label">
                IP
              </template>
              {{ me["ip-address"] }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                子网掩码
              </template>
              {{ me.mask }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                网关1
              </template>
              {{ me["gate-way1"] }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                网关2
              </template>
              {{ me["gate-way2"] }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                运行状态
              </template>
              {{ me.status }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                ntp状态
              </template>
              <el-switch
                  v-model="me['ntp-enable']"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  @change="isNtp">
              </el-switch>
            </el-descriptions-item>

          </el-descriptions>

          <el-button type="primary" size="mini" @click="dialogFormVisible = true" style="float: right">配置</el-button>

        </div>
      </el-tab-pane>
      <el-tab-pane label="Ntp" name="second">
        <Ntp/>
      </el-tab-pane>

    </el-tabs>
    <el-dialog
        :visible.sync="dialogFormVisible"
        width="400px"
        :modal="true"
        :close-on-click-modal="false"
        :show-close="true"
        style="padding: 30px 20px 0;">
      <div slot="title" class="header-title" :style="{'background':'#2b7ffd','color':'#fff'}">
        <div style="padding:15px 20px;">修改设备属性</div>
      </div>
      <el-form label-width="90px">
        <el-form-item label="名称">
          <el-input v-model="me.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="运行状态">
          <el-select v-model="me.status" autocomplete="off">
            <el-option value="安装中"></el-option>
            <el-option value="运行中"></el-option>
            <el-option value="维护中"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="IP">
          <el-input v-model="me['ip-address']" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="子网掩码">
          <el-input v-model="me.mask" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="网关1">
          <el-input v-model="me['gate-way1']" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="网关2">
          <el-input v-model="me['gate-way2']" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="NTP状态">
          <el-select v-model="me['ntp-enable']" autocomplete="off">
            <el-option value="false"></el-option>
            <el-option value="true"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Ntp from "@/components/dispose/me/Ntp";
import axios from "axios";

export default {
  name: "NetworkElement",
  components: {
    Ntp
  },
  data() {
    return {
      showUI: false,
      activeName: 'first',
      dialogFormVisible: false,
      nodeName: '',
      me: {
        "hardware-version": "",
        "ntp-enable": false,
        "eq": [],
        "uuid": "",
        "manufacturer": "",
        "software-version": "",
        "ip-address": "",
        "layer-protocol-name": [],
        "device-type": "",
        "name": "",
        "ntp-server-in-use": "",
        "ntp-servers": {
          "ntp-server": [
            {
              "port": 0,
              "name": ""
            }
          ]
        },
        "product-name": "",
        "gate-way1": "",
        "gate-way2": "",
        "status": "",
        "mask": ""
      },
    }
  },
  methods: {
    isNtp() {
      if (this.me["ntp-enable"]) {
        this.activeName = "second";
      } else {
        this.activeName = "first";
      }
    },
    async getMe() {
      this.nodeName = this.$route.params.node
      if (this.nodeName !== '') {
        await axios.get("/topology/node/" + this.nodeName + "/me").then(
            response => {
              console.log("请求成功", response.data);
              this.$message.success("获取设备信息成功");
              this.me = response.data.me;
            },
            error => {
              console.log("失败！", error.message);
              this.$message.error(error.message);
            }
        )
        this.showUI = true;
      } else {
        this.$message.warning("请选择节点后再进行操作 ！")
      }

    },
  },
  mounted() {
    this.$bus.$on('node-name', (data) => {
      console.log("me - 收到的信息为： ", data)
      this.nodeName = data;
      console.log("**********", this.nodeName)
    });
    // this.$bus.$on("node:name", (data) => {
    //
    //   this.nodeName = data;
    //   console.log("me-现在真实的节点信息是：", this.nodeName);
    //
    // })
  },
  created() {
    this.getMe();

  }


}
</script>

<style scoped>

</style>